<template>
  <div class="singer" ref="singer">
   <list-view @select="selectSinger"  :dataA="singers" ref="list"></list-view>
   <router-view></router-view>
  </div>
</template>
<!-- 
     1 better-scroll 的的原理 父元素的高度要定义好 子元素的高度去撑开他 
-->
<script>
	import ListView from 'base/listview/listview'
	import {getSingerList} from 'api/singer' //封装请求歌手数据
	import {ERR_OK} from 'api/config'
	import Singer from 'common/js/singer'//封装歌手img图片class
	import {mapMutations} from 'vuex'
	import {playlistMixin} from 'common/js/mixin'
	const HOT_SINGER_LEN = 10
	const HOT_NAME = '热门'
 export default {
  name:'singer',
    mixins: [playlistMixin],
	data() {
		return {
			singers:[]
		}
	},
// 	props: {
// 		dataA:{
// 			type: Array,
// 			default:[]
// 		}
// 	},
	created(){
	  this._getSingerList()
	},
    components: {
      ListView
    },
	methods: {
	    handlePlaylist(playlist) {
	  const bottom = playlist.length > 0 ? '60px' : ''
	  this.$refs.singer.style.bottom = bottom
	  this.$refs.list.refresh()
	},
		selectSinger(singer) {//listview派发的事件
			this.$router.push({path:`/singer/${singer.id}`})
			this.setSinger(singer)
		},
		_getSingerList() { //获取歌手信息
			getSingerList().then((res) => {
				if (res.code === ERR_OK) {
					this.singers = this._normalizeSinger(res.data.list)
				}
			})
		},
		
		_normalizeSinger(list) { //处理数据
			 let map={ // 编写自己想要的数据结构
				 hot:{
					 title:HOT_NAME ,
					 items:[]
				 }
			 }
			 
			 list.forEach((item, index) => { //只遍历前10前热们数据
			 	if (index < HOT_SINGER_LEN) {
			 		map.hot.items.push(new Singer({
			 			name: item.Fsinger_name,//name
			 			id: item.Fsinger_mid,//img地址
						// axajid:item.Fsinger_id //自己动手添加的一个Fsinger_id
			 		}))
			 	}
			 	const key = item.Findex
			 	if (!map[key]) { //如果没有数据 就在添加数据格式
			 		map[key] = {
			 			title: key,
			 			items: []
			 		}
			 	}
			 	map[key].items.push(new Singer({//
			 		name: item.Fsinger_name,
			 		id: item.Fsinger_mid,
					// axajid:item.Fsinger_id
			 	}))
				
			})
			//为了得到有序列表 处理map
			let hot=[] //热门
			let ret=[] //剩下的
			for (let key in map) {
				let val=map[key]
				if(val.title.match(/[a-zA-Z]/)){ //字母位子标
					ret.push(val)
				}else if(val.title==HOT_NAME){ //剩下的热们歌手
					hot.push(val)
				}
			}
			ret.sort((a,b)=>{ //比较字母大小 确定位置
				return a.title.charCodeAt(0)-b.title.charCodeAt(0)
			})
			return hot.concat(ret)
        } 
		 ,
		 ...mapMutations({
		 	setSinger: 'SET_SINGER'
		 })
		 
	},
	
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  .singer
    position: fixed
    top: 88px
    bottom: 0
    width: 100%
</style>
